<template>
  <div>
    <el-dialog
      v-model="visible"
      :title="$t('user.selectTag')"
      width="36%"
      class="components-update-user-tags"
    >
      <el-form
        :inline="true"
        :model="searchForm"
        class="demo-form-inline form"
        @submit.prevent
      >
        <el-form-item>
          <el-input
            v-model="tagName"
            :placeholder="$t('user.tagTip1')"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <div
            class="default-btn primary-btn"
            @click="onSearch"
          >
            {{ $t('user.query') }}
          </div>
        </el-form-item>
      </el-form>
      <el-main>
        <div class="main">
          <div
            v-for="item in tagList"
            :key="item.userTagId"
          >
            <span
              :class="active.includes(item.userTagId) ? 'active' : 'classification'"
              @click="onCheck(item)"
            >{{ item.tagName }}</span>
          </div>
        </div>
        <div v-if="tagList.length < 1">
          {{ $t('order.noData') }}
        </div>
      </el-main>

      <!-- 分页 -->
      <el-pagination
        v-if="tagList.length"
        :current-page="page.pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        @update:page-size="onPageSizeChange"
        @update:current-page="onPageChange"
      />
      <!-- /分页 -->
      <template #footer>
        <div>
          <div
            class="default-btn"
            @click="visible = false"
          >
            {{ $t('remindPop.cancel') }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="onConfirm"
          >
            {{ $t('remindPop.confirm') }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshDataList'])

const tagName = ref(null)

const props = defineProps({
  value: {
    default: '',
    type: String
  },
  // 最大上传数量
  limit: {
    default: 10,
    type: Number
  }
})
const visible = ref(false)

const dataForm = ref({
  tagList: [], // 标签
  userIds: []
})
const init = ids => {
  visible.value = true
  dataForm.value.userIds = ids
  onGetTagList()
}
// 每页数
const page = ref({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
const onPageSizeChange = val => {
  page.value.pageSize = val
  page.value.currentPage = 1
  onGetTagList(page.value)
}
// 当前页
const onPageChange = val => {
  page.value.currentPage = val
  onGetTagList(page.value)
}
// 分页获取标签
const searchForm = ref({
  tagType: 0, // 标签类型0手动1条件2系统
  tagName: null
})
const tagList = ref([]) // 标签
const onGetTagList = pageParam => {
  http({
    url: http.adornUrl('/user/userTag/byTagType'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        {
          current: pageParam == null ? page.value.currentPage : pageParam.currentPage,
          size: pageParam == null ? page.value.pageSize : pageParam.pageSize
        },
        searchForm.value
      )
    )
  }).then(({ data }) => {
    tagList.value = data.records
    page.value.total = data.total
  })
}
// 搜索
const onSearch = () => {
  searchForm.value.tagName = tagName.value
  onGetTagList(page.value)
}
// 多选
const active = ref([]) // 选种的标签

const onCheck = item => {
  if (active.value.includes(item.userTagId)) {
    const index = active.value.indexOf(item.userTagId)
    active.value.splice(index, 1)
  } else {
    active.value.push(item.userTagId)
  }
  if (active.value.length > props.limit) {
    const index = active.value.indexOf(item.userTagId)
    active.value.splice(index, 1)
    return ElMessage.error($t('retailProd.tipError2').replace('NUM', props.limit))
  }
}
const onConfirm = () => {
  if (!dataForm.value.userIds) {
    return
  }
  if (!active.value.length) {
    ElMessage.error({ message: $t('user.pleaseSelectTag') })
    return
  }
  dataForm.value.tagList = active.value
  const param = dataForm.value
  http({
    url: http.adornUrl('/user/userTag/updateUserTag'),
    method: 'put',
    data: http.adornData(param)
  }).then(() => {
    active.value = []
    ElMessage({
      message: $t('remindPop.success'),
      type: 'success',
      duration: 1200,
      onClose: () => {
        visible.value = false
        emit('refreshDataList', page.value)
      }
    })
  })
}
defineExpose({
  init
})
</script>
<style lang="scss" scoped>
.components-update-user-tags {
  display: flex;
  justify-content: center;
  align-items: center;
  .active,
  .classification {
    float: left;
    margin-left: 10px;
    padding: 10px;
    background: #155bd4;
    margin-bottom: 10px;
    border-radius: 4px;
    font-size: 14px;
    color: #f7f7f7;
    cursor: pointer;
  }
  .classification {
    background: #f7f7f7;
    color: #666;
  }
}
</style>
